<template>
  <div>
    <div v-if="islogin">
      <h1>已登陆</h1>
      <button @click="exit">退出登录</button>
    </div>
    <van-form v-else>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="请输入手机号码"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field
        v-model="pw"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round type="info" @click="login">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "", //用户输入的用户名
      pw: "", //用户输入的密码
      islogin: false,
      //定义用户是否登录，如果已经登陆就显示已经登陆，如果没有登录就显示form表单，在template中用v-if控制了节点的显示隐藏
    };
  },
  mounted() {
    this.$http("/islogin", "get").then((res) => {
      console.log(res);
      if (res.suc) {
        this.islogin = true;
      }
    });
  }, //页面加载时判断用户是否已经登陆，使用data中的isLogin保存登录状态
  methods: {
    login() {
      this.$http("/login", "post", {
        username: this.username,
        pw: this.pw,
      }).then((res) => {
        if (res.suc) {
          this.$store.commit("setToken", res.token);
          this.$router.push({ path: "/userinfo" });
        }
      });
      //点击登录时，用户请求login接口，如果响应成功,则执行vuex中的setToken方法把服务端返回的token存进本地存储中，页面跳转至个人信息页面
    },
    //用户登录操作 登录成功后改变store里的登录状态，跳转至个人页

    exit() {
      localStorage.removeItem("token");
      window.location.reload();
    },
    //退出登录时删除本地存储中的token，并刷新页面
  },
};
</script>
